<script setup>
import Product from '@/components/Shop/Product.vue';
import { useCartStore } from '@/stores/cart.js'
import { computed, ref, watch } from 'vue';
import { useRouter } from 'vue-router'

const router = useRouter()


const cartStore = useCartStore()
// 获取当前店铺名称，对应购物车仓库数据进行渲染
const props = defineProps(['shopName'])
// 是否显示结算面
const isShow = ref(false)

// 获取当前店铺
const shopCart = computed(() => {
    return cartStore.cartList.find(item => item.name == props.shopName)
})

// 获取相应店铺的购物车数据
const shopCartList = computed(() => {
    if (shopCart.value) {
        // 表示有该店铺，返回购物车商品集合
        return shopCart.value.list

    } else {
        return []
    }
})

// 全选复选操作
const checkedAll = computed({
    get() {
        // 复选改变全选
        return shopCartList.value.every(item => item.checked)
    },
    // 当 checkedAll 的值改变时执行 set(当前转态)
    set(newCheck) {
        // console.log(newCheck);
        // 全选改变复选
        shopCartList.value.forEach(item => item.checked = newCheck)
    }
})

// 计算总价
const cartTotal = computed(() => {
    return shopCartList.value.reduce((sum, item) => {
        // 只计算选中的
        if (item.checked) {
            // 表示选中的商品，进行累加计算
            return sum += item.number * item.price
        } else {
            // 如果没有选中 初始 sum = 0
            return sum = 0
        }
    }, 0).toFixed(2)
})

// 计算商品个数
const cartCount = computed(() => {
    return shopCartList.value.reduce((sum, item) => {
        // 只计算选中的
        if (item.checked) {
            // 表示选中的商品，进行累加计算
            return sum += item.number
        } else {
            // 如果没有选中 初始 sum = 0
            return sum = 0
        }
    }, 0)
})

/** 
// 是否全选
const isCheckAll = ref(true)

// 全选与复选绑定
const handelCheckAll = () => {
    // 点击全选按钮，改变全选的状态
    isCheckAll.value = !isCheckAll.value
    shopCartList.value.forEach(item => {
        item.checked = isCheckAll.value
    })
}

// 复选控制全选
const handelCheck = () => {
    isCheckAll.value = shopCartList.value.every(item => item.checked)
} 
**/

// 清空购物车
const clearCart = () => {
    // 将所有购物车商品数量变为 0
    shopCart.value.list.forEach(item => item.number = 0)

    // 删除该购物车
    cartStore.cartList = cartStore.cartList.filter(item => item.name != props.shopName)
}

// 结算
const orderConfirm = () => {
    // 跳转订单页
    router.push({
        path:'/orderConfirm',
        query:{
            shopName:props.shopName
        }
    })
}


</script>

<template>
    <div class="cart">
        <div class="cart_mask" v-if="isShow" @click="isShow = false"></div>
        <div class="cart_product" v-if="isShow">
            <div class="cart_product_header" v-if="isShow">
                <div class="cart_product_header_allChecked">
                    <input type="checkbox" class="circle-checkbox" v-model="checkedAll" @click="handelCheckAll"> 全选
                </div>
                <div class="cart_product_header_clear" @click="clearCart">清空购物车</div>
            </div>
            <div class="cart_product_list">
                <div class="cart_product_list_item" v-for="item in shopCartList" :key="item.id">
                    <div class="checkbox">
                        <!-- <input type="checkbox" class="circle-checkbox" :checked="item.checked" @change="changeChecked(item)" name="" id=""> -->
                        <input type="checkbox" class="circle-checkbox" v-model="item.checked" @click="handelCheck">
                    </div>
                    <div class="content">
                        <Product min="min" :shopName="props.shopName" :category="item" />
                    </div>
                </div>
            </div>
        </div>
        <div class="cart_check" @click="isShow = true">
            <div class="cart_check_icon">
                <img src="http://www.dell-lee.com/imgs/vue3/basket.png" alt="">
                <span class="tag">{{ cartCount }}</span>
            </div>
            <div class="cart_check_empty" v-if="shopCartList.length == 0">购物车是空的</div>
            <div class="cart_check_content" v-else>
                <div class="cart_check_content_total_price">总计 : <span class="check_content_total_price_number">￥{{
                        cartTotal }}</span></div>
                <div class="cart_check_content_submit" @click="orderConfirm">结算</div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";

.cart {
    &_mask {
        position: absolute;
        top: 0;
        bottom: .5rem;
        left: 0;
        right: 0;
        background-color: rgba($color: #000000, $alpha: .4);
    }

    &_product {
        width: 100%;
        position: absolute;
        left: 0;
        bottom: .5rem;
        background-color: $bgColor;

        //圆形复选框
        /* 设置选中背景 */
        .circle-checkbox:checked {
            background: #1673ff;
        }

        /* 设置复选框样式 */
        .circle-checkbox {
            width: .2rem;
            height: .2rem;
            background-color: #ffffff;
            border: solid 1px $light-fontColor;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            font-size: 0.8rem;
            margin: 0;
            padding: 0;
            position: relative;
            display: inline-block;
            vertical-align: top;
            cursor: default;
            -webkit-appearance: none;
            -webkit-user-select: none;
            user-select: none;
        }

        /* 设置伪类，即显现的对勾样式 */
        .circle-checkbox:checked::after {
            content: "";
            top: 5px;
            left: 4px;
            position: absolute;
            background: transparent;
            border: #fff solid 2px;
            border-top: none;
            border-right: none;
            height: 3px;
            width: 8px;
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }

        &_header {
            padding: .18rem;
            display: flex;
            justify-content: space-between;
        }

        &_list {
            max-height: 3rem;
            overflow-y: scroll;

            &_item {
                display: flex;

                .checkbox {
                    display: flex;
                    align-items: center;
                    margin-left: .18rem;
                }

                .content {
                    flex: 1;
                    width: 100%;
                }
            }
        }
    }

    &_check {
        width: 100%;
        height: .49rem;
        border-top: .01rem solid $content-bgColor;
        position: absolute;
        left: 0;
        bottom: 0;
        display: flex;

        // 购物车图标
        &_icon {
            width: .84rem;
            height: .49rem;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;

            img {
                width: .28rem;
                height: .26rem;
            }

            .tag {
                display: inline-block;
                width: .15rem;
                height: .15rem;
                border-radius: 50%;
                background-color: $hightlight-fontColor;
                color: $bgColor;
                font-size: .1rem;
                text-align: center;
                position: absolute;
                top: .05rem;
                right: .18rem;
            }

        }

        // 空购物车
        &_empty {
            line-height: .49rem;
        }

        // 总价
        &_content {
            flex: 1;
            display: flex;
            position: relative;
            width: 100%;

            &_total_price {
                flex: 1;
                line-height: .49rem;
                color: $hightlight-fontColor;

                &_number {
                    font-size: .18rem;
                }
            }

            &_submit {
                width: .98rem;
                height: .49rem;
                background-color: $btn-bgColor;
                color: $bgColor;
                text-align: center;
                line-height: .49rem;
            }
        }
    }
}
</style>